<template>
  <div class="my-padding">
    <el-form ref="form" :rules="rules" :model="form" label-width="8rem">
      <el-form-item prop="name">
        <span slot="label">
          伙伴姓名
        </span>
        <el-input v-model="form.name" type="text" placeholder="请输入姓名" :disabled="kaiguan"></el-input>
      </el-form-item>
      <el-form-item prop="sex" label="性别">
        <el-radio v-model="form.sex" label="男" :disabled="kaiguan">男</el-radio>
        <el-radio v-model="form.sex" label="女" :disabled="kaiguan">女</el-radio>
      </el-form-item>
      <el-form-item prop="telephone">
        <span slot="label">手机号</span>
        <el-input
          @change="selectNum()"
          v-model="form.telephone"
          placeholder="请输入11位数字"
          :disabled="kaiguan"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">其他联系方式</span>
        <el-row>
          <el-col :span="2">
            <el-button plain @click="addtelephoneItem()" :disabled="kaiguan">添加</el-button>
          </el-col>
          <el-col :span="18">
            <div v-for="(item, index) in form.telephoneList" :key="index">
              <div style="width:60%">
                <el-row>
                  <el-col :span="15">
                    <el-input v-model="item.telephones" placeholder="请输入联系方式" :disabled="kaiguan"></el-input>
                  </el-col>
                  <el-col :span="5">
                    <el-button
                      icon="el-icon-delete"
                      circle
                      @click="deletetelephoneItem(item, index)"
                      :disabled="kaiguan"
                    ></el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="weixin" label="微信号">
        <el-input v-model="form.weixin" placeholder="微信号" @change="selectWei" :disabled="kaiguan"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-input v-model="form.email" placeholder="电子邮箱" :disabled="kaiguan"></el-input>
      </el-form-item>
      <el-form-item prop="company">
        <span slot="label">单位名称</span>
        <el-input v-model="form.company" placeholder="单位名称（没有单位写个人）" :disabled="kaiguan"></el-input>
      </el-form-item>
      <el-form-item label="联系地址">
        <el-input v-model="form.address" placeholder="联系地址" :disabled="kaiguan"></el-input>
      </el-form-item>
      <el-form-item prop="department" label="工作部门">
        <el-input v-model="form.department" placeholder="工作部门" :disabled="kaiguan"></el-input>
      </el-form-item>
      <el-form-item prop="post" label="工作岗位">
        <el-input v-model="form.post" placeholder="工作岗位" :disabled="kaiguan"></el-input>
      </el-form-item>
      <el-form-item prop="source" label="伙伴来源">
        <el-select v-model="form.source" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in sourceList"
            :key="item.dicValue"
            :label="item.dicKey"
            :value="item.dicValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="item" label="伙伴对应项目">
        <el-input v-model="form.item" placeholder="伙伴对应项目"></el-input>
      </el-form-item>
      <el-form-item prop="debt" label="伙伴对应债权">
        <el-input v-model="form.debt" placeholder="伙伴对应债权"></el-input>
      </el-form-item>
      <el-form-item prop="exitType" label="退出类型">
        <el-select v-model="form.exitType" placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in exitTypeList"
            :key="item.dicValue"
            :label="item.dicKey"
            :value="item.dicValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="exitInfo.usage" label="用途偏好">
        <el-select v-model="form.exitInfo.usage" multiple placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in usageList"
            :key="item.dicValue"
            :label="item.dicKey"
            :value="item.dicValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="exitInfo.abilityMin" label="投资规模">
        <el-row>
          <el-col :span="4">
            <el-select v-model="form.exitInfo.abilityMin" placeholder="请选择" style="width:100%">
              <el-option
                v-for="item in abilityList"
                :key="item.dicValue"
                :label="item.dicKey"
                :value="item.dicValue"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="1  ">
            <div align="center">{{" ~ "}}</div>
          </el-col>
          <el-col :span="4">
            <el-select v-model="form.exitInfo.abilityMax" placeholder="请选择" style="width:100%">
              <el-option
                v-for="item in abilityList"
                :key="item.dicValue"
                :label="item.dicKey"
                :value="item.dicValue"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item prop="overArea">
        <span slot="label">
          覆盖地区
        </span>
        <el-cascader
          style="width:100%"
          placeholder="试试搜索:江苏"
          v-model="form.overArea"
          :options="provinceList"
          :props="{value:'regionId',label:'regionName',children:'children', multiple: true }"
          filterable
        ></el-cascader>
      </el-form-item>
      <el-form-item prop="exitInfo.fancySList">
        <span slot="label">
          资产偏好(类型)
        </span>
        <el-select v-model="form.exitInfo.fancySList" multiple placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in assetsTypeList"
            :key="item.dicValue"
            :label="item.dicKey"
            :value="item.dicValue"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="form.note" placeholder="备注"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addData()">保存</el-button>
        <el-button @click="$router.push('index')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import $ from "@/api/assets";

  export default {
    data() {
      return {
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'change' }
          ],
          sex:[
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          telephone:[
            { required: true, message: '请输入手机号码', trigger: 'change' }
          ],
          company:[
            { required: true, message: '请输入单位名称（没有单位写个人）', trigger: 'change' }
          ],
          source:[
            { required: true, message: '请选择伙伴来源', trigger: 'change' }
          ],
          exitType:[
            { required: true, message: '请选择退出类型', trigger: 'change' }
          ],
          weixin:[
            { required: true, message: '请输入微信号', trigger: 'change' }
          ],
          department:[
            { required: true, message: '请输入工作部门', trigger: 'change' }
          ],
          post:[
            { required: true, message: '请输入工作岗位', trigger: 'change' }
          ],
          'exitInfo.usage':[
            { required: true, message: '请选择用途偏好', trigger: 'change' }
          ],
          'exitInfo.abilityMin':[
            { required: true, message: '请输入投资规模', trigger: 'change' }
          ],
          overArea:[
            { required: true, message: '请选择覆盖地区', trigger: 'change' }
          ],
          item:[
            { required: true, message: '请填写伙伴对应项目', trigger: 'change' }
          ],
          debt:[
            { required: true, message: '请填写伙伴对应债权', trigger: 'change' }
          ],
          'exitInfo.fancySList':[
            { required: true, message: '请选择资产偏好(类型)', trigger: 'change' }
          ],
        },
        form: {
          partnerType: 3,
          name: "",
          sex: "",
          telephone: "",
          telephoneList: [],
          weixin: "",
          email: "",
          exitType: "",
          company: "",
          department: "",
          post: "",
          orgType: [],
          orgRemark: "",
          source: "",
          item: "",
          debt: "",
          address: "",
          note: "",
          overArea: [],
          exitInfo: {
            usage: [],
            abilityMin: "",
            abilityMax: "",
            fancySList: []
          }
        },
        kaiguan: false,
        assetAttrList: [],
        provinceList: [],
        sourceList: [],
        bizTypeList: [],
        orgTypeList: [],
        exitTypeList: [],
        usageList: [],
        abilityList: [],
        assetsTypeList: [],
        sexList: [
          {label: "男", value: "男"},
          {label: "女", value: "女"}
        ]
      };
    },
    created() {
      $.addInit().then(res => {
        if (res.success) {
          this.sourceList = res.data.source;
          this.provinceList = res.data.province;
          this.assetAttrList = res.data.attr;
          this.bizTypeList = res.data.bizTypeList;
          this.orgTypeList = res.data.orgTypeList;
          this.exitTypeList = res.data.exitTypeList;
          this.usageList = res.data.usageList;
          this.abilityList = res.data.abilityList;
          this.assetsTypeList = res.data.assetsTypeList;
        }
      });
    },
    methods: {
      selectWei() {
        $.weixinNumber({
          weixin: this.form.weixin,
          create_user_id: this.$route.query.id,
        }).then((res) => {
          if (res.data != null) {
            this.form.name = res.data.name;
            this.form.sex = res.data.sex;
            this.form.weixin = res.data.weixin;
            this.form.email = res.data.email;
            this.form.telephone = res.data.telephone;
            this.form.company = res.data.company;
            this.form.department = res.data.department;
            this.form.post = res.data.post;
            this.form.orgType = res.data.orgType;
            this.form.source = res.data.source;
            this.form.telephoneList = res.data.telephoneList;
            this.kaiguan = true;
            this.$notify({
              title: "基本信息匹配成功",
              message: "若要修改基本信息，请至编辑修改",
              type: "success",
            });
          }
        });
      },
      selectNum() {
        if (!/^1[0-9]{10}$/.test(this.form.telephone)){
          this.form.telephone='';
        }
        if (!/^1\d{10}$/.test(this.form.telephone)) {
          return;
        }
        $.matchNumber({
          telephone: this.form.telephone,
          create_user_id: this.$route.query.id
        }).then(res => {
          if (res.data != null) {
            this.form.name = res.data.name;
            this.form.sex = res.data.sex;
            this.form.weixin = res.data.weixin;
            this.form.telephone = res.data.telephone
            this.form.email = res.data.email;
            this.form.company = res.data.company;
            this.form.department = res.data.department;
            this.form.post = res.data.post;
            this.form.orgType = res.data.orgType;
            this.form.source = res.data.source;
            this.form.telephoneList = res.data.telephoneList
            this.kaiguan = true;
            this.$notify({
              title: "基本信息匹配成功",
              message: "若要修改基本信息，请至编辑修改",
              type: "success",
            });
          }
        });
      },
      addtelephoneItem() {
        this.form.telephoneList.push({
          telephones: "",
        });
      },
      deletetelephoneItem(item, index) {
        this.form.telephoneList.splice(index, 1);
      },
      addItem() {
        this.form.exitInfo.fancyList.push({
          typeId: "",
          typeName: ""
        });
      },
      deleteItem(item, index) {
        this.form.exitInfo.fancyList.splice(index, 1);
      },

      addData() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (!this.validate()) return;
            $.add(this.form).then(response => {
              if (response.success) {
                if (response.data === 0) {
                  this.$message({
                    type: "error",
                    message: "此类型伙伴已存在",
                  });
                  this.$router.push("add");
                } else if (response.data === 1) {
                  this.$message({
                    type: "error",
                    message: "至少输入一种联系方式",
                  });
                  this.$router.push("add");
                } else {
                  this.$router.replace("index");
                }
              }
            });
          }
        });

      },
      validate() {
        let error = "";
        if (this.form.name.length <= 1) {
          error = "姓名至少两位\n";
        } else if (this.form.telephone.length <11) {
          error = "手机号必填\n";
        }else if (
          !/^1\d{10}$/.test(this.form.telephone) && this.form.telephone.replace(" ", "") != ""
        ) {
          error = "手机号码不正确\n";
        } else if(this.form.company.length==0){
          error = "单位名称必填（没有单位写个人）\n";
        }else if (this.form.overArea.length == 0) {
          error = "请选择区域\n";
        } else if (this.form.exitInfo.fancySList.length==0){
          error = "资产偏好必选\n";
        }else if (
          this.form.email.length != 0 &&
          !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.form.email)
        ) {
          error = "邮箱不正确\n";
        }

        if (error) {
          this.$message({
            message: error,
            type: "error"
          });
          return false;
        }
        return true;
      }
    }
  };
</script>
<style scoped>
  .red {
    color: red;
    font-size: 1.5rem;

    vertical-align: middle;
  }
</style>
